From f51250941f4425ce4d63b90a266a29e8588a7d03 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Wed, 30 Apr 2025 08:56:43 +0200
Subject: Add tagging to articles

---
 src/pages/blog/[id].astro | 61 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

(limited to 'src/pages/blog/[id].astro')

diff --git a/src/pages/blog/[id].astro b/src/pages/blog/[id].astro
index 65c8a25..935a796 100644
--- a/src/pages/blog/[id].astro
+++ b/src/pages/blog/[id].astro
@@ -61,7 +61,68 @@ const schema = {
     <time datetime={entry.data.publishedAt.toISOString()}>
       {formattedDate}
     </time>
+    {entry.data.tags && entry.data.tags.length > 0 && (
+      <>
+        • Etiquetas:
+        <ul class="tags">
+          {entry.data.tags.map((tag: string) => (
+            <li><a href={`/blog/?tag=${encodeURIComponent(tag)}`}>{tag}</a></li>
+          ))}
+        </ul>
+      </>
+    )}
   </small>
 
   <Content />
 </Layout>
+
+<style lang="scss">
+  @use "../../../styles/variables" as v;
+  @use "sass:color";
+
+  .tags {
+    display: inline-flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0.75rem;
+  }
+
+  .tags li {
+    display: inline;
+  }
+
+  .tags a {
+    // Estilo de enlace normal, siguiendo los estilos predefinidos en Layout.astro
+    color: v.$accentDark;
+    font-size: 0.85rem;
+    font-family: v.$monoFontStack;
+    text-decoration: none;
+    box-shadow: 0 1px v.$accent;
+    transition: all 0.2s ease;
+
+    &:hover {
+      box-shadow: 0 2px v.$accentDark;
+    }
+
+    &:focus {
+      color: v.$accentDark;
+      outline: none;
+      background-color: v.$secondary;
+      box-shadow: 0 4px #0b0c0c;
+    }
+  }
+
+  /* Estilos para la información de la publicación */
+  small {
+    display: block;
+    margin-top: -1rem;
+    margin-bottom: 1.5rem;
+    font-size: 0.85rem;
+    color: color.adjust(v.$dark, $lightness: 30%);
+  }
+
+  time {
+    font-style: italic;
+  }
+</style>
-- 
cgit v1.3